<template>
       <div class="yuantou">
        <div class="wrap">
          <Panel icon="./img/title/5.png" :class="toggle==false?'active':''" title="预报警信息" @click.native="toggleMap">
            <!--各区预警处置情况排行图表-->
            <!-- <Bar v-show="pickRank && pickRank.values.length >0 "  name="整改情况" :names="pickRank.names" :values="pickRank.values" :unit="pickRank.unit" /> -->
            <Reminder
              v-show="pickRank && pickRank.values.length >0 "
              :station-id="reqData?reqData.stationId:''"
              :area-code="reqData?reqData.areaCode:''"
              name="整改情况"
              :names="pickRank.names"
              :values="pickRank.values"
            />
            <NoData v-show="!pickRank  || pickRank &&pickRank.values.length === 0" />
          </Panel>
          <Panel icon="./img/title/1.png" title="各区任务执行情况" unit="件">
            <!--各区任务执行情况图表-->
            <Scatter v-show="originRegion.data.length > 0" :data="originRegion.data" />
            <NoData v-show="originRegion.data.length === 0" />
          </Panel>

          <Panel icon="./img/title/3.png" title="车辆行驶监控视频">
            <!--源头视频-->
            <video-player
              :station-id="reqData?reqData.stationId:''"
              :area-code="reqData?reqData.areaCode:''"
            />
          </Panel>
        </div>
        <div class="wrap">
          <!--地图-->
          <JsonMap1 v-if="toggle"
            :nametitle="'货运企业接入情况'"
            :data="plantDistribute.data"
            :area-code="reqData?reqData.areaCode:''"
            @SelectCompany="SelectCompany"
            @change="getData"
            :searchBar="false"
            :top="160"
          />
          <transition enter-active-class="animate__animated animate__fadeInUp">
          <WarmingCall v-if="!toggle"/>
          </transition>
          <Mapfooter1 />
        </div>
        <div class="wrap">
           <Panel icon="./img/title/2.png" title="台账完成情况">
            <!--各区维修情况接入图-->
             <Ranking  :text="['一月','二月','三月','四月','五月','六月']" :values="[100,200,1000,2000,3000,4000]" />
            <NoData v-show="inventoryContrast.data.length === 0" />
          </Panel>
           <Panel icon="./img/title/6.png" title="从业人员教育完成情况" >
            
           <MoreLine style="width:100%;height:100%" />
               
            <!-- <NoData v-show="outboundInventory.values.length === 0" /> -->
          </Panel>
          <Panel icon="./img/title/4.png" title="企业纵膈排名情况" >
          <!--车辆接入情况-->
            
           <Scroll />
            <!-- <NoData v-show="fertQuantity.values.length === 0" /> -->
          </Panel>
        </div>
      </div>
</template>
<script>
import JsonMap1 from "@/views/JsonMap1";
import Reminder from "@/components/reminder";
import Scatter from "@/components/charts/Scatter";
import NoData from "@/components/NoData";
import VideoPlayer from "@/components/videoplayer";
import Mapfooter1 from "@/components/keyunMapFooter";
import Ranking from "@/components/charts/ranking";
import MoreLine from "@/components/charts/moreLine";
import Scroll from "@/components/scroll";
import WarmingCall from "@/components/warmingCall";
import countTo from "vue-count-to";
import types from "@/store/constants/types";
import ns from "@/store/constants/ns";
import { mapState } from "vuex";
const nameSpaced = ns.HOME + "/";
export default {
     components: {
    JsonMap1,
    NoData,
    Scatter,
    VideoPlayer,
    Reminder,
    Scroll,
    MoreLine,
    countTo,
    Mapfooter1,
    WarmingCall,
    Ranking
  },
  computed: {
    ...mapState(nameSpaced, {
      inventoryContrast: (state) => state.inventoryContrast, //车辆超载
      pickRank: (state) => state.pickRank, //各区预警处置情况
      originRegion: (state) => state.originRegion, //各区任务执行
      fertQuantity: (state) => state.fertQuantity, //各区电子运单上传情况
      outboundInventory: (state) => state.outboundInventory, //运单日均称重重量
      plantDistribute: (state) => state.plantDistribute, //市企业分布情况
    }),
  },
  data() {
    return {
      stationId: "",
      areaCode: "",
      reqData: null,
      InterVal: null,
      region: "", //当前数据所在的区域
      videoBig: false,
      currentNav: 0,
      toggle:true
    };
  },
  mounted() {
    this.InterVal = setInterval(() => {
      let obj = Object.assign({ timer: true }, this.reqData);
      this.$store.dispatch(nameSpaced + types.HOME_GET_DATA, obj);
    }, 20000);
  },
  destroyed() {
    this.InterVal ? clearInterval(this.InterVal) : null;
  },
  methods: {
      toggleMap(){
          this.toggle=!this.toggle
      },
    getData(data) {
      this.reqData = data;
      this.region = data.name;

      this.$store.dispatch(nameSpaced + types.HOME_GET_DATA, data);
    },
    //选择企业
    SelectCompany(obj) {
      this.reqData = obj;
      this.title = `(${obj.name})`;

      this.$store.dispatch(nameSpaced + types.HOME_GET_DATA, obj);
    },
    //选择企业性质
    selectType(index) {
      this.currentNav = index;
    },
  },
}
</script>
<style lang="scss" scoped>
@import "../../style/views/home/home.scss";
.index-pie{
  width:100%;
  height:100%;
}
</style>